<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .category-card {
            margin-bottom: 1rem;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .parent-category {
            background: linear-gradient(45deg, #0d6efd, #0056b3);
            color: white;
        }
        .sub-category {
            background: #f8f9fa;
            border-left: 4px solid #0d6efd;
            margin-left: 2rem;
            margin-top: 0.5rem;
        }
        .section-title {
            position: relative;
            margin-bottom: 2rem;
            text-align: center;
            color: #2c3e50;
        }
        .section-title:after {
            content: '';
            display: block;
            width: 50px;
            height: 3px;
            background: #0d6efd;
            margin: 10px auto;
            border-radius: 2px;
        }
        .action-btn {
            margin-right: 0.5rem;
        }
        .add-category-btn {
            margin-bottom: 20px;
        }
        .category-info {
            flex-grow: 1;
        }
        .category-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
    </style>
</head>
<body>
<!-- 使用admin专用导航栏 -->
<div th:replace="~{common/admin-navbar :: navbar}"></div>

<div class="container mt-4">
    <h2 class="section-title">分类管理</h2>

    <div class="text-end">
        <a href="/admin/categories/add" class="btn btn-primary add-category-btn">
            <i class="fas fa-plus-circle"></i> 添加分类
        </a>
    </div>

    <!-- 错误消息显示 -->
    <div th:if="${param.error}" class="alert alert-danger alert-dismissible fade show" role="alert">
        <span th:if="${param.error[0] == 'categoryInUse'}">
            <i class="fas fa-exclamation-triangle"></i> 无法删除该分类，因为有商品正在使用此分类！
        </span>
        <span th:if="${param.error[0] == 'hasSubCategories'}">
            <i class="fas fa-exclamation-triangle"></i> 无法删除该分类，因为该分类下还有子分类！
        </span>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- 分类列表 -->
    <div th:if="${parentCategories.isEmpty()}" class="alert alert-info text-center">
        <i class="fas fa-info-circle"></i> 暂无分类数据，请先添加父分类。
    </div>

    <div th:unless="${parentCategories.isEmpty()}">
        <div th:each="parent : ${parentCategories}" class="category-group">
            <!-- 父分类卡片 -->
            <div class="card category-card parent-category">
                <div class="card-body d-flex align-items-center">
                    <div class="category-info">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-folder-open me-2"></i>
                            <span th:text="${parent.categoryName}">父分类名称</span>
                        </h5>
                        <small class="text-light opacity-75">
                            ID: <span th:text="${parent.categoryId}">分类ID</span>
                        </small>
                    </div>
                    <div class="category-actions">
                        <a th:href="@{'/admin/categories/edit/' + ${parent.categoryId}}" 
                           class="btn btn-light btn-sm action-btn">
                            <i class="fas fa-edit"></i> 编辑
                        </a>
                        <a th:href="@{'/admin/categories/delete/' + ${parent.categoryId}}" 
                           class="btn btn-outline-light btn-sm action-btn"
                           onclick="return confirm('确定要删除这个分类吗？删除后无法恢复！')">
                            <i class="fas fa-trash-alt"></i> 删除
                        </a>
                    </div>
                </div>
            </div>

            <!-- 子分类列表 -->
            <div th:each="child : ${subCategoriesMap.get(parent.categoryId)}" 
                 class="card category-card sub-category">
                <div class="card-body d-flex align-items-center">
                    <div class="category-info">
                        <h6 class="card-title mb-0">
                            <i class="fas fa-folder me-2 text-primary"></i>
                            <span th:text="${child.categoryName}">子分类名称</span>
                        </h6>
                        <small class="text-muted">
                            ID: <span th:text="${child.categoryId}">分类ID</span>
                        </small>
                    </div>
                    <div class="category-actions">
                        <a th:href="@{'/admin/categories/edit/' + ${child.categoryId}}" 
                           class="btn btn-outline-primary btn-sm action-btn">
                            <i class="fas fa-edit"></i> 编辑
                        </a>
                        <a th:href="@{'/admin/categories/delete/' + ${child.categoryId}}" 
                           class="btn btn-outline-danger btn-sm action-btn"
                           onclick="return confirm('确定要删除这个分类吗？删除后无法恢复！')">
                            <i class="fas fa-trash-alt"></i> 删除
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
</body>
</html> 